import React, { useEffect, useState } from 'react'
import './style.scss'
import axios from 'axios'
const Index = () => {
  const [tab, setTab] = useState([]);
  const [suibian, setSuibian] = useState(0)
  // 请求数据函数
  const getTab = () => {
    // 请求数据
    axios.get('/api/tab').then((res) => {
      // 保存数据
      setTab(res.data.data)
      console.log(res.data.data)
    })
  }
  useEffect(() => {
    // 调用请求函数
    getTab()
  }, [])
  return (
    <div className='tab'>
      <div className="left">
        <ul className='left-ul'>
          {
            tab.map((v, i) => {
              return <li onClick={() => setSuibian(i)} key={v.id} className={suibian === i ? "active" : ""}>{v.leftTitle.title}</li>
            })
          }
        </ul>
      </div>
      <div className="right">
        {
          tab.length > 0 && tab[suibian].children.map((v, i) => {
            return <div key={i}>
              <h4>{v.title}</h4>
              <div className='list'>
                {
                  v.children.map((v, i) => {
                    return <dl key={i}>
                      <dt>
                        <img src={v.image} alt="" />
                      </dt>
                      <dd>
                        {v.title}
                      </dd>
                    </dl>
                  })
                }
              </div>
            </div>
          })
        }
      </div>
    </div>
  )
}

export default Index